<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
body{font-size:12px; line-height:2; font-family:"微软雅黑";}
#plist{width:900px; margin:200px auto;}
#plist li{width:280px; height:290px; list-style:none; position:relative; float:left; margin-right:20px; 
overflow:hidden;}
#plist li img{width:280px; height:160px; transition:all 500ms}
#plist li .mask{width:280px; height:160px; position:absolute; left:0px; top:-160px; z-index:10; transition:all 500ms}
#plist li .box{width:280px; height:290px; position:relative; z-index:8;}
#plist li .orangebg{width:280px; height:130px; position:absolute; left:0px; bottom:-130px; background-color:orange; z-index:5; transition:all 500ms}
#plist li:hover{color:white}
#plist li:hover .mask{top:0}
#plist li:hover .orangebg{bottom:0;}
</style>
</head>

<body>
<ul id="plist">
	<li>
    	<div class="mask"><img src="transparent.png" /></div>
        <div class="box">
        	<img src="a0.jpg" />
            <h3>我院成功举办技能竞赛</h3>
            <span>5月12日下午2：00-6：00，我院在信息楼7402成功举办了电子产品设计与制作技能竞赛。经过紧张激烈的比赛，2016级电子信息工程技术
		</span>
        </div>
        <div class="orangebg"></div>
    </li>
	<li>
    	<div class="mask"><img src="transparent.png" /></div>
        <div class="box">
        	<img src="a0.jpg" />
            <h3>我院成功举办技能竞赛</h3>
            <span>5月12日下午2：00-6：00，我院在信息楼7402成功举办了电子产品设计与制作技能竞赛。经过紧张激烈的比赛，2016级电子信息工程技术
		</span>
        </div>
        <div class="orangebg"></div>
    </li>
	<li>
    	<div class="mask"><img src="transparent.png" /></div>
        <div class="box">
        	<img src="a0.jpg" />
            <h3>我院成功举办技能竞赛</h3>
            <span>5月12日下午2：00-6：00，我院在信息楼7402成功举办了电子产品设计与制作技能竞赛。经过紧张激烈的比赛，2016级电子信息工程技术
		</span>
        </div>
        <div class="orangebg"></div>
    </li>
    
</ul>
</body>
</html>
